<template>
  <div class="banner-container" @mouseenter="autoStop" @mouseleave="autoStart">
    <ul
      class="images"
      :style="{
            width:banners.length * 100 + '%',
            marginLeft:-index * 100 + '%'
        }"
    >
      <li v-for="(item,i) in banners" :key="i">
        <a :href="item.link">
          <img :src="item.url" />
        </a>
      </li>
    </ul>
    <ul class="dots">
      <li v-for="(item, i) in banners" :key="i" :class="{active : i == index}" @click="index = i"></li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    banners: {
      type: Array,
      required: true // 必传
    },
    duration:{
        type:Number,
        default:2000
    }
  },
  data() {
    return {
      index: 0,
      timer: null
    };
  },
  methods: {
    autoStart() {
      if (this.timer) {
        return;
      }
      this.timer = setInterval(() => {
        this.index = (this.index + 1) % this.banners.length;
      }, 2000);
    },
    autoStop() {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  created() {
    this.autoStart();
  },
  destroyed() {
    this.autoStop();
  }
};
</script>

<style scoped>
.banner-container {
  height: 350px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.images {
  height: 100%;
  transition: 0.5s;
}
.banner-container li {
  display: block;
  width: 1080px;
  height: 100%;
  float: left;
}
.banner-container li a {
  display: block;
  width: 100%;
  height: 100%;
}
.banner-container li a img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
.dots {
  position: absolute;
  transform: translateX(-50%);
  bottom: 15px;
  left: 50%;
}
.dots li {
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  border-radius: 50%;
  margin: 0 3px;
  cursor: pointer;
}
.dots li.active {
  background-color: #fff;
}
</style>